import React from 'react'
import styled from 'styled-components'

import Container from '../Container'
import Logo from '../Logo'

import AccountButton from './components/AccountButton'
import Nav from './components/Nav'
import { NavLink } from 'react-router-dom'
import TxButton from './components/TxButton'

const TopBar: React.FC = () => {
  return (
    <StyledTopBar>
      <Container size="lg">
        <StyledTopBarInner>
          <StyledTopBar1 to="/">
            <Logo />
          </StyledTopBar1>
          <StyledTopBarpc>
          <Nav />
          </StyledTopBarpc>
          <StyledTopBarpcTop>
            <TxButton />
            <AccountButton />
            <Span1 href="https://cn.supernova.cash">
              中文
            </Span1>
          </StyledTopBarpcTop>
          <StyledTopBarh5>
          <Nav />
          </StyledTopBarh5>
        </StyledTopBarInner>
      </Container>
    </StyledTopBar>
  )
}

const StyledTopBar = styled.div`
position: relative;
z-index: 2;
`

const Span1 = styled.a`
  color: #fff;
  line-height: 36px;
  margin-left: 8px;
  text-decoration:none;
`

const StyledTopBarpc = styled.div`
display: block;
@media (max-width: 768px) {
  display: none;
};
`


const StyledTopBarpcTop = styled.div`
    display: flex;
    justify-content: flex-end;
    padding-left: 17px; 
@media (max-width: 768px) {
  padding-left: 5px; 
};
`

const StyledTopBarh5 = styled.div`
display: none;
@media (max-width: 768px) {
  display: block;
  width: 100%;
};
`

const StyledTopBar1 = styled(NavLink)`
flex: 1;
@media (max-width: 768px) {
  flex: none;
};
`

const StyledTopBarInner = styled.div`
  align-items: center;
  display: flex;
  height: ${props => props.theme.topBarSize}px;
  justify-content: space-between;
  max-width: ${props => props.theme.siteWidth}px;
  width: 100%;
  flex-wrap: wrap;
`

export default TopBar